<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>WPS官方网站</title>
		<style type="text/css">
			.inner {
				height: 56px;
				width: 1210px;
				margin: 0 auto
			}

			li {
				list-style: none;
			}

			a {
				text-decoration: none;
				color: #626262;
			}

			.fl {
				float: left;
			}

			.fr {
				float: right;
			}

			.bd {
				border: 1px solid red;
			}

			.logo {
				/* overflow: hidden; */
				width: 312px;
				height: 100%;
				background: url(images/logo.svg) no-repeat 0;
				background-size: contain;
			}

			.navigation {
				padding-right: 20px;
				/* padding-top: 5px; */
			}

			.navigation>li {
				padding: 0 5px;
				margin-left: 32px;
				font-size: 15px;
			}

			.navigation>li:hover {
				border-bottom: 2px solid black;
			}

			.subnav {
				display: none;
			}

			.subnav a {
				display: block;
				line-height: 20px;
				font-size: 16px;
			}

			/* .navigation li:hover .subnav{
				display: block;
			} */
			.header-jg {
				padding-left: 120px;
			}

			.login-btn {
				width: 86px;
				padding: 5px 0;
				line-height: normal;
				border-radius: 4px;
				border: 1px solid #c9c9c9;
				font-size: 14px;
				box-sizing: border-box;
				color: #555;
				display: inline-block;
				text-align: center;
			}

			.banner {
				width: 1250px;
				height: 506px;
				background: url(./images/banner.png) no-repeat center;
				position: relative;
				margin: 0 auto;
				/* background-size: 1920px 506px; */
				background-position: center;
			}

			.banner-btn {
				width: 150px;
				padding: 10px 10px;
				line-height: normal;
				border-radius: 4px;
				border: 2px solid #00d5ff;
				font-size: 20px;
				box-sizing: border-box;
				color: #555;
				display: inline-block;
				text-align: center;
				margin-top: 50px;
				margin-left: 50px;
			}

			.logo1 {}

			.title {
				margin: 30px auto;
				height: 45px;
				width: 105px;
				background: url(./images/popular_download.72e9e826.svg) no-repeat 0 center;
				line-height: 200px;
				/* overflow: hidden */
			}
			
			.logo1 {
				position: absolute;
				left: 600px;
				top: 100px;
			}

			p {
				font-size: 50px;
				font-weight: 1000;
				line-height: 0px;
			}

			.hot {
				width: 1250px;
				height: 432px;
				padding-left: 51px;
				text-align: center;
				margin: 0 auto;
				
			}

			.hot1 {
				height: 290px;
				width: 280px;
				background-color: #f9f9f9;
			}

			.hot2 {
				/* padding-left: 15px */
				;
				height: 290px;
				width: 280px;
				background-color: #f9f9f9;
				margin-left: 12px;
			}

			.B {
				font-weight: 500;
			}

			.hot-btn {
				width: 150px;
				height: px;
				padding: 5px 0;
				line-height: normal;
				border-radius: 5px;
				font-size: 17px;
				box-sizing: border-box;
				background-color: #007AFF;
				color: #ffffff;
				display: inline-block;
				text-align: center;
				margin-top: 50px;
			}

			.hot3 {
				padding-top: 55px;
			}

			.updata {
				width: 1250px;
				/* 1140 */
				height: 380px;
				background: url(images/beijingtu1.jpg) no-repeat 0 center;
				margin-top: 80px;
				text-align: center;
				margin: 0 auto;
			}

			.up1 {
				padding-top: 80px;
			}

			.up2 {
				font-size: 20px;
				font-weight: 400;
				font-family: "微软雅黑";
				color: #000000;
				margin: 26px 0 7px;
			}

			.btn {
				width: 106px;
				height: 36px;
				line-height: 36px;
				border-radius: 4px;
				font-size: 14px;
				box-sizing: border-box;
				background-color: #007AFF;
				color: #ffffff;
				display: inline-block;
				text-align: center;
				margin: 30px;
			}

			.botton {
				padding-top: 30px;
			}

			.part {
				width: 1250px;
				height: 770px;
				text-align: center;
				padding-top: 10px;
				margin: 0 auto;
			}

			.part1 {
				width: 618.2px;
				height: 380px;
				background: url(images/bgchiba1.jpg) no-repeat 0 center;
				background-size: 100%；
			}

			.part2 {
				width: 618.2px;
				height: 380px;
				background: url(images/block3_31.jpg);
			}

			.part3 {
				width: 618.2px;
				height: 380px;
				background: url(images/wpspicbg_pc1.jpg);
			}

			.part4 {
				width: 618.2px;
				height: 380px;
				background: url(images/bglinux1.jpg);
			}

			.part24 {
				margin-left: 10px;
			}

			.part34 {
				margin-top: 10px;
			}

			.part1234 {
				padding-top: 80px;
			}

			.footer {
				width: 1250px;		/* 1240 */
				height: 360px;
				background: url(images/kf_bg.d8f56661.jpg) no-repeat 0 center;
				margin-top: 10px;
				margin: 0 auto;
			}
			.footer-1{
				width: 170px;
				height: 300px;
			}
			
			h5{
				font-size: 18px;
				line-height: 10px;
				margin-top: 50px;
				margin-left: 40px;
				margin-bottom: 10px
				color: #313131;
				font-weight: 400;
			}
			
			.footer-2{
				line-height: 30px;
			}
			.code {
				background: url(images/code.jpg) no-repeat 50% center;
				background-size: 100% 100% width: 100px;
				height: 100px;
				margin-top: 15px;
			}

			.wechat-font {
				display: block;
				text-align: center;
				font-size: 13px;
				font-weight: 400;
				color: #555;
			}
			.connect{
				width: 320px;
				height: 200px;
				margin-left: 220px;
				padding-top: 50px;
			}
			.contact{
				padding-top: 15px;
				font-size: 23px;
				font-weight: 400;
				font-family: "ms outlook";
			}
			.address{
				height: 100px;
			}
			.address1{
				font-size: 10px;
				line-height: 10px;
				font-size: 8px;
				font-weight: 200;
			}
		</style>
	</head>

	<body>
		<header class="inner ">
			<div class="logo fl"></div>
			<ul class="navigation fl">
				<li class="fl">
					<a href="">所有产品</a>
					<ul class="subnav fl">
						<li><a href="">
								<h3>个人用户</h3>
							</a></li>
						<li><a href=""></a></li>
						<li><a href=""></a></li>
					</ul>
				</li>
				<li class="fl"><a href="">政企服务</a></li>
				<li class="fl"><a href="">中小企业</a></li>
				<li class="fl"><a href="">会员服务</a></li>
				<li class="fl"><a href="">关于WPS</a></li>
				<div class="header-jg fr"><img src="./images/header_kf.007c6451.svg">
					<div class="fr"><a href="">客服中心</a>
						<a class="login-btn" href="">登录</a>
					</div>
				</div>
			</ul>
		</header>
		<div class="banner">
			<div class="logo1">
				<img src="images/hero_logo_1.1894860b.png">
				<p>多人实时协作的在线Office</p>
				<a class="banner-btn" href="">个人使用</a>
				<a class="banner-btn" href="">企业访问</a>
			</div>
		</div>
		<div class="title"></div>
		<div class="hot ">
			<div class="hot1 fl">
				<h3>WPS Office 2019 PC版</h3>
				<div>简单 创造不简单</div>
				<div>个性化的办公软件</div>
				<div>全面支持PDF</div>
				<a class="hot-btn" href="">立即下载</a>
				<div class="hot3 fl"><img src="images/hot01.jpg" width="280px" height="170px"></div>
			</div>
			<div class="hot2 fl">
				<h3>WPS Office Mac版</h3>
				<div>文档在Mac上顺滑呈现</div>
				<div>常用文件格式完美兼容</div>
				<div>深色模式、左右分屏、Handoff</div>
				<a class="hot-btn" href="">立即下载</a>
				<div class="hot3 fl"><img src="images/hot02.jpg" width="280px" height="170px"></div>
			</div>
			<div class="hot2 fl">
				<h3>金山文档</h3>
				<div>多人实时协作的在线Office</div>
				<div>2.39亿用户的选择</div>
				<div>高效的远程团队办公方式</div>
				<a class="hot-btn" href="">立即下载</a>
				<div class="hot3 fl"><img src="images/hot03.png" width="280px" height="170px"></div>
			</div>
			<div class="hot2 fl">
				<h3>金山PDF</h3>
				<div>轻巧简洁，非凡的阅读效果</div>
				<div>高效转换，精准的格式互转</div>
				<div>自由编辑，便捷的操作体验</div>
				<a class="hot-btn" href="">立即下载</a>
				<div class="hot3 fl"><img src="images/hot04.jpg" width="280px" height="170px"></div>
			</div>
		</div>
		
		<div class="updata">
			<div class="up1">
				<a href="">
					<img src="images/logoshuangshiyi.svg" width="91px" height="90px">
					<div class="up2">WPS「2021年度更新」</div>
					<div>一站式办公服务平台</div>
					<a class="btn" href="">立即下载</a>
				</a>
			</div>
		</div>
		<div class="part">
			<div class="fl part1">
				<div class="part1234">
					<a href="">
						<img src="images/jinshancibalogo.svg" width="86px" height="85px">
						<div class="up2">金山词霸</div>
						<div>您身边的翻译专家</div>
						<a class="btn" href="">立即下载</a>
					</a>
				</div>
			</div>
			<div class="fl part2 part24">
				<div class="part1234">
					<a href="">
						<img src="images/jinshandazitonglogo.svg" width="86px" height="85px">
						<div class="up2">金山打字通</div>
						<div>零基础入门，轻松学打字</div>
						<a class="btn" href="">立即下载</a>
					</a>
				</div>
			</div>
			<div class="fl part3 part34">
				<div class="part1234">
					<a href="">
						<img src="images/wpspic_logo.svg" width="86px" height="85px">
						<div class="up2">WPS图片</div>
						<div>快速看图，轻巧好用</div>
						<a class="btn" href="">立即下载</a>
					</a>
				</div>
			</div>
			<div class="fl part4 part24 part34">
				<div class="part1234">
					<a href="">
						<img src="images/linuxlogo.svg" width="86px" height="85px">
						<div class="up2">WPS Office 2019 For Linux</div>
						<div>原生，兼容，高效</div>
						<a class="btn" href="">立即下载</a>
					</a>
				</div>
			</div>
		</div>
				
		<div class="footer">
			<div class="fl footer-1">
				<h5>企业服务</h5>
				<ul class="footer-2">
					<li><a href="">在线购买</a></li>
					<li><a href="">政企采购</a></li>
					<li><a href="">商务合作</a></li>
				</ul>
			</div>
			<div class="fl footer-1">
				<h5>产品支持</h5>
				<ul class="footer-2">
					<li><a href="">安全响应中心</a></li>
					<li><a href="">会员中心</a></li>
					<li><a href="">WPS开放平台</a></li>
					<li><a href="">办公技巧</a></li>
					<li><a href="">服务协议</a></li>
				</ul>
			</div>
			<div class="fl footer-1">
				<h5>关于我们</h5>
				<ul class="footer-2">
					<li><a href="">新浪微博</a></li>
					<li><a href="">金山荣誉</a></li>
					<li><a href="">发展历程</a></li>
					<li><a href="">公司简介</a></li>
					<li><a href="">加入我们</a></li>
					<li><a href="">投资者关系</a></li>
				</ul>
			</div>
			<div class="fl footer-1">
				<h5>用户支持</h5>
				<ul class="footer-2">
					<li><a href="">联系我们</a></li>
					<li><a href="">邮箱反馈</a></li>
					<li class="code"></li>
					<p class="wechat-font">微信扫码反馈</p>
				</ul>
			</div>
			<div class="connect fl">
				<div class=""><img src="./images/footer_t_logo.5b3ccf94.svg" ></div>
				<p class="contact">400-677-5005（购买与支持）</p>
				<div class="address">
					<p class="address1">北京市海淀区小营西路33号 金山软件大厦 100085 </p>
					<p class="address1">珠海金山办公软件有限公司</p>
					<p class="address1">电话：010-62927777（总机）</p>
				</div>
			</div>
		</div>
	</body>
</html>
